<template>
  <section>
    <el-select v-model="row.val" filterable remote reserve-keyword placeholder="请输入检测关键词" :remote-method="remoteMethod" size="mini">
      <el-option v-for="detection in detectionList" :key="detection.id" :label="detection.title" :value="detection.id">
      </el-option>
      <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    </el-select>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "detection",
    props: ['row','activity'],
    data(){
      return{
        detectionList:null,
        totalPage:0,
        searchKey:null
      }
    },
    created(){
      if(this.row.val) this.getDetection(this.row.val)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getDetection(id){
        this.fetch({name:"getDetection",data:{id}})
          .then(res=>{
            this.detectionList=[res]
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      remoteMethod(key){
        this.searchKey=key
        this.getDetectionList(0,this.searchKey)
      },
      goPage(val){
        this.getDetectionList(val-1,this.searchKey)
      },
      getDetectionList(pageNo,key){
        this.fetch({name:"getDetectionList",data:{page:pageNo?pageNo:0,key}})
          .then(res=>{
            this.detectionList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
